<template>
  <div id="contactUs">
    <ul class="cont" id="moveee" @mousedown="moveee">
      <!-- <li> 
        <el-tooltip class="item" effect="dark" content="系统公告" placement="left-start">
          <el-badge :value="msgNum" :hidden="msgNum == 0">
            <i class="iconfont" style="font-size: 23px;" @click="$router.push({name: 'messageList'})">&#xe669;</i>
          </el-badge>
        </el-tooltip>
      </li> -->
      <li>
        <i class="iconfont" style="font-size: 25px">&#xe8c9;</i>
        <el-tooltip class="item" effect="dark" content="在线咨询" placement="left-start">
          <div class="onlineConsultationContent">
            <iframe style="border: 0" id="onlineConsultation" width="40px" height="40px" scrolling="no" :src="iframeSrc"></iframe>
          </div>
        </el-tooltip>
      </li>
      <!-- <li @click="jumpTeaching">
        <el-tooltip class="item" effect="dark" content="常见问题" placement="left-start">
          <i style="font-size:19px" class="iconfont">&#xe614;</i>
        </el-tooltip>
      </li> -->
      <li>
        <el-tooltip class="item" effect="dark" content="010-21423966" placement="left-start">
          <i class="iconfont" style="font-size: 19px">&#xe600;</i>
        </el-tooltip>
      </li>
    </ul>
    <!-- <ul class="cont Btmcont" style="bottom: 80px;height: 100px;" id="movee" @mousedown="movee">
    </ul> -->
    <div class="moveShadom" v-if="ismove"></div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "contactUs",
  props: {
    iframeSrc: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      isOpen: false,
      ismove: false,
    };
  },
  computed: {
    ...mapState({
      msgNum: (state) => state.common.msgNum,
    }),
  },
  methods: {
    move(e, id) {
      document.onselectstart = function () {
        return false;
      }; //解决拖动会选中文字的问题
      //用css   user-select: none; 解决
      let content = document.getElementById(id);
      let disX = e.layerX;
      let disY = e.layerY;
      let height = document.body.clientHeight;
      document.onmousemove = (e) => {
        this.ismove = true;
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位
        let left = e.clientX - disX;
        let bottom = e.clientY + disY;
        //移动当前元素
        content.style.left = left + "px";
        content.style.bottom = height - bottom + "px";
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
        setTimeout(() => {
          this.ismove = false;
        }, 100);
      };
    },
    moveee(e) {
      this.move(e, "moveee");
    },
    jumpTeaching() {
      window.open("http://db0.yundaizhang.com/Help/videoCourse.html?type=2");
    },
  },
  mounted() {},
};
</script>
<style lang="less">
#contactUs {
  .moveShadom {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    // background-color: red;
  }
  .cont {
    position: absolute;
    right: 5px;
    bottom: 250px;
    width: 40px;
    height: 77px;
    z-index: 9999999999999999;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(155, 154, 154, 0.5);
    li {
      width: 100%;
      height: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      // .el-badge {
      //   display: inline;
      //   .el-badge__content{
      //     padding: 0px 3px;
      //     right: 12px;
      //     line-height: 16px;
      //   }
      // }
      i {
        cursor: pointer;
        color: #a8baec !important;
      }
      .Tax {
        width: 24px;
        position: absolute;
        right: 0;
        top: 10px;
      }
      .onlineConsultationContent {
        position: absolute;
        top: 0px;
        width: 100%;
        right: 0;
        height: 100%;
        cursor: pointer;
      }
    }
  }
  // .Btmcont{
  //   li{
  //     height: 50%;
  //   }
  // }
}
</style>
